<template>
	<view>
		<uNavbar title="通知详情"></uNavbar>
		
		<view class="official flex_Z">
			<view class="official_tit flex_ld">
				<view class="official_l flex_dq">
					<!-- <image :src="avatar" mode=""></image>
					<text>xxx官方</text> -->
					<text>{{articLeInfos.small_text}}</text>
				</view>
				<text>{{articLeInfos.look}}人观看</text>
			</view>
			<view class="official_btm">
				<rich-text class="off_nodes" :nodes="nodes" ></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		articleInfo
	} from "../../api/index.js";
	export default {
		data() {
			return {
				ids: '',
				articLeInfos: {},
				nodes: ''
			}
		},
		onLoad(e) {
			console.log(e);
			this.ids = e.id
			this.isArticle()
		},
		methods: {
			// 初始化列表
			isArticle() {
				let data = {
					id: this.ids
				}
				articleInfo(data).then(res => {
					console.log(res);
					// 解析富文本里面的图片 最大只能100%
					this.articLeInfos = res.data
					var htmlContent = res.data.content
					const regex = new RegExp('<img', 'gi');
					htmlContent = htmlContent.replace(regex, `<img style="max-width: 100%;"`)
					this.nodes = htmlContent;
				})
			},
		},
	}
</script>
<style>
	page {
		background: #211E38;
	}
</style>
<style scoped>
	.video_box {
		width: 750rpx;
		height: 420rpx;
		margin-top: 10rpx;
	}

	.videos {
		width: 100%;
	}

	.official {
		width: 92%;
		margin: 0 auto;
		font-size: 28rpx;
		color: #A6A5AF;
	}

	.official_tit {
		width: 100%;
		padding: 50rpx 0;
		font-size: 24rpx;
		border-bottom: 1rpx solid #ffffff20;
	}

	.official_l {
		width: 80%;
		font-size: 28rpx;
		color: #ffffff;
	}

	.official_l>text:nth-child(1) {
		/* background: pink; */
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.official_l>image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.official_btm {
		width: 100%;
		margin-top: 30rpx;
		overflow: hidden;
	}

	.off_nodes {
		opacity: 0.7;
	}

	/deep/.off_nodes>img {
		width: 100%;
		height: 100%;
	}
</style>